<template>
  <div v-loading="listLoading">
    已选择：{{ selectedNode.label }}
    <el-tree
      :data="treeData"
      :props="{children: 'children',
               label: 'label'}"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>

import { getTree } from '@/api/blog/category'

export default {
  data() {
    return {
      selectedNode: '',
      treeData: [],
      listLoading: true,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTree().then(response => {
        this.treeData.push(response.data)
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleNodeClick(data) {
      this.selectedNode = data
      this.$parent.$parent.$parent.model.categoryId = data.id
      this.$parent.$parent.$parent.model.categoryName = data.label
      // this.selected()
    },
    selected(data) {
      this.$parent.$parent.$parent.model.typeId = this.selectedNode.id
      this.$parent.$parent.$parent.model.typeType = this.selectedNode.label
      // Bus.$emit('selected', this.selectedNode)
    }
  }

}
</script>

<style>

</style>
